How do you limit input length in a form?

Limiting Input Length in HTML Forms

In HTML, you can limit the number of characters a user can type in a form field using the maxlength attribute. This attribute is commonly used with <input> and <textarea> elements.

Key Points About maxlength

1
maxlength defines the maximum number of characters allowed in an input field.
2
If a user tries to type more characters, the browser prevents additional input.
3
It works on text-based inputs (e.g., text, email, password) and <textarea>.
4
It only controls the input length in the browser — server-side validation is still needed for security.

Example of maxlength

Difficulty: 2/10

Topics: form-validation, html-attributes, ux-patterns

Scenario Questions

0-2 years experience

1
You're building a signup form with a bio field limited to 500 characters. How do you enforce that limit in HTML, and what does the browser do when someone tries to type past it?
2
A teammate says maxlength works on <input type='number'>. Is that true? If not, what's the right way to limit numeric input length?

2-5 years experience

1
Design a character counter component that updates live as the user types, handles paste events gracefully, and announces remaining characters to screen readers. What HTML attributes and ARIA patterns do you use?
2
Your product manager wants a 'soft limit' warning at 400 chars but hard stop at 500 for a textarea. How do you implement the visual warning without blocking input, and what edge cases around paste/drag-drop do you test?

5-8 years experience

1
You're standardizing input validation across a design system used by 12 teams. How do you architect a reusable validation hook/component that enforces maxlength consistently, supports custom error messages, and doesn't break when teams compose it with their own onChange handlers?
2
A security audit flags that your maxlength-only validation on a comment field allows 10MB payloads via curl bypassing the UI. Walk me through the layered defense you'd add — client, gateway, API — and where you'd put the canonical length rule.

8+ years experience

1
Your org is migrating a legacy PHP app to React. The old codebase has 200+ forms with inconsistent maxlength handling — some in HTML, some in JS, some only server-side. Propose a migration strategy that prevents regressions, handles i18n character counting (graphemes vs code units), and lets teams adopt incrementally.
2
You're defining a cross-platform input length standard for web, iOS, and Android clients sharing a GraphQL API. How do you specify the contract so UX is consistent (counters, warnings, errors) but each platform implements natively, and how do you version the spec when product wants emoji to count as 2 chars?

Follow-up Questions

❓What happens if a user pastes text longer than maxlength?
❓How do you announce the character count to screen reader users?